import React from "react";
import { Link, useParams, useNavigate, Form } from "react-router-dom"
import { SwipeAction, Empty } from 'antd-mobile'
import './mycollect.css'
import { routerBeforeEach } from "../../router/routerBeforeEach"


function Mycollect() {
    let navigate = useNavigate();//链接跳转
    let [collect, SetCollect] = React.useState([])
    React.useEffect(() => {
        SetCollect(JSON.parse(localStorage.getItem("collect")))
    }, [])


    return (
        <div className="mycollect">

            <div className="top">
                <div className="left">
                    <i onClick={() => navigate(-1)} className="iconfont icon-zuobian"></i>
                </div>
                <div>我的菜谱</div>
                <div className="right">
                </div>
            </div>
            {
                collect.length == 0 ? (<Empty
                    style={{ padding: '220px 0' }}
                    imageStyle={{ width: 128 }}
                    description='暂无数据'
                />) : ('')
            }

            <div className="goods-page">
                <div className="page-relate-list">
                    <div className="box">
                        <ul>
                            {
                                collect && collect.map(item => {
                                    return (
                                        <SwipeAction
                                            key={item.dashes_id}

                                            rightActions={[
                                                {
                                                    key: 'delete',
                                                    text: '删除',
                                                    color: 'danger',
                                                    onClick: async () => {
                                                        console.log(item.dashes_id);
                                                        collect = collect.filter(items => {
                                                            return items.dashes_id != item.dashes_id
                                                        })
                                                        SetCollect(collect)
                                                        localStorage.setItem("collect", JSON.stringify(collect))
                                                    },
                                                },

                                            ]}

                                        >
                                            <Link to={'/detailsvideo/' + item.dashes_id}>

                                                <li>
                                                    <div className='img'>
                                                        <img src={item.image} />

                                                    </div>
                                                    <div className='text'>

                                                        <h6>{item.dashes_name}</h6>
                                                        <div className="txt">{item.material_desc}</div>
                                                        <div className='bar'>
                                                            <div className='rows'>
                                                                <i className='icon icon-cook'></i>
                                                                难度：{item.hard_level}
                                                                <div className='line'></div>
                                                                <i className='icon icon-taste'></i>
                                                                口味：{item.taste}
                                                            </div>
                                                            <div className='rows'>
                                                                <i className='icon icon-time'></i>
                                                                烹饪时间：{item.cooking_time}
                                                            </div>
                                                        </div>
                                                    </div>



                                                </li>
                                            </Link>

                                        </SwipeAction>

                                    )
                                })
                            }

                        </ul>
                    </div>

                </div>

            </div>

        </div >
    )
}

export default routerBeforeEach(Mycollect)